<template>
  <div class="data-box-container">
    <data-box
        :icon="Document"
        backgroundColor="#5470c6"
        text="基地面积(亩)"
        value="100"
    ></data-box>

    <data-box
        :icon="Money"
        backgroundColor="#91cc75"
        text="种养种类(种)"
        value="8"
    ></data-box>

    <data-box
        :icon="Grid"
        backgroundColor="#fac858"
        text="地块数量(块)"
        value="2"
    ></data-box>

    <data-box
        :icon="UserFilled"
        backgroundColor="#ee6666"
        text="人员总数(位)"
        value="52"
    ></data-box>

    <data-box
        :icon="Checked"
        backgroundColor="#73c0de"
        text="种植批次(批)"
        value="5"
    ></data-box>

    <data-box
        :icon="Shop"
        :icon-size="1"
        backgroundColor="#3ba272"
        text="大棚数量(个)"
        value="10"
    >
    </data-box>
  </div>
</template>

<script setup lang="ts">
import {
  Checked,
  Document,
  Money,
  Shop,
  UserFilled,
  Grid,
} from "@element-plus/icons-vue";
import DataBox from "@/views/Home/components/DataBox.vue";
</script>

<style scoped>
.data-box-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  padding: 4px;
  box-sizing: border-box;
}

/* 修改data-box的样式 */
:deep(.data-box) {
  width: 100%;
  height: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 确保内部元素不会被压缩 */
:deep(.data-box-content) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px;
  box-sizing: border-box;
}

/* 确保图标容器有固定大小 */
:deep(.icon-container) {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 调整文字大小 */
:deep(.text) {
  font-size: 12px;
}

:deep(.value) {
  font-size: 14px;
  font-weight: bold;
}

@media (max-width: 1280px) {
  .data-box-container {
    gap: 6px;
    padding: 3px;
  }
  
  :deep(.data-box) {
    min-height: 50px;
  }
  
  :deep(.icon-container) {
    width: 28px;
    height: 28px;
  }
}
</style>
